React Navigation 使用
Table of Contents
基本用法
安装
npm install --save react-navigation
或
yarn add react-navigation
StackNavigator
StackNavigator 比较常用, 以它为例进行介绍.
创建 StackNavigator
创建 StackNavigator 并把页面加进去.
import React from 'react'; import { Button, View, Text } from 'react-native'; import { createStackNavigator } from 'react-navigation'; // Version can be specified in package.json class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => this.props.navigation.navigate('Details')} /> </View> ); } } class DetailsScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Details Screen</Text> <Button title="Go to Details... again" onPress={() => this.props.navigation.navigate('Details')} /> </View> ); } } const RootStack = createStackNavigator( { Home: HomeScreen, Details: DetailsScreen, }, { initialRouteName: 'Home', } ); export default class App extends React.Component { render() { return <RootStack />; } }
多个页面的结构组织
如果所有页面都写在一个文件, 会让文件过于臃肿.
可以在 App.js 中, 设置导航器.
const RootStack = createStackNavigator( { Home: HomeScreen, Details: DetailsScreen, }, { initialRouteName: 'Home', } ); export default class App extends React.Component { render() { return <RootStack />; } }
新建其他文件, 如: HomeScreen
... class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => this.props.navigation.navigate('Details')} /> </View> ); } } ...
在 HomeScreen.js 文件最后, 将其导出:
export default HomeScreen;
在 App.js 文件中, 将 HomeScreen 导入:
import HomeScreen from './HomeScreen'
Generated by Emacs 25.x(Org mode 8.x)
Copyright © 2014 - Pinvon - Powered by EGO